<template>
	<view class="play-page">
		<z-header url-type="navigateBack">
			<view class=" header-title-custom">{{list[current].name}}</view>
			<view class="header-title-tips">{{list[current].author}}</view>
			<text class="header-title-more" slot="right" @click="showActionSheet = true">&#xe60b;</text>
		</z-header>
		<view class="play" ref="playWraper" @touchstart="onTouch" @touchend="onTouchEnd">
			<view class="play-wrap" :data-start="current===0" :data-end="current===this.list.length-1">
				<view v-for="(v,i) in list" :key="i" class="item-wrap" :data-hide="i-current>2 || i-current<-2" :data-index="i-current">
					<image :src="v.previewImg" mode="widthFix"></image>
					<view class="information">
						<avatar :src="v.avatarUrl" :name="v.author" circle></avatar>
						<view class="web-font-thin">{{v.likeCount}} 收听者</view>
						<view class="like-wrap iconfont" @click="likeHandle($event, i, !v.liked)"><text>{{v.liked ? '\ue60f' : '\ue60e'}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="controller">
			<view class="iconfont" :data-disabled="current===0" @click="shiftSong($event, 'prev')">&#xe614;</view>
			<view class="iconfont play-pause" @click="changeAudioStatus">{{status==='play'?'\ue615':'\ue611'}}</view>
			<view class="iconfont" :data-disabled="current===list.length-1" @click="shiftSong($event, 'next')">&#xe613;</view>
			<view class="progress-wraper">
				<view class="progress" :style="{width:progress}"></view>
			</view>
		</view>
		<action-sheet v-model="showActionSheet" :items="actionSheet"></action-sheet>
	</view>
</template>

<script>
	import actionSheet from '@/components/zp/feedback/actionsheet/actionsheet'
	import {mapState, mapMutations} from 'vuex'
	export default {
		components: {
			'action-sheet': actionSheet
		},
		onLoad(params) {
			if(params.id!=this.id){
				this.status === 'play' && this.ctx.stop()
				this.setId(params.id)
				this.init()
				this.ctx.onPlay()
				this.ctx.onTimeUpdate(this.progressMoving)
			}
		},
		computed:{
			...mapState('music', ['ctx', 'progress', 'duration', 'status', 'id', 'list', 'current'])
		},
		data() {
			return {
				clienXStart: 0,
				actionSheet: [
					{name:'添加到播放列表'},
					{name:'分享给好友'},
					{name:'取消'}
				],
				showActionSheet: false
			}
		},
		methods: {
			...mapMutations('music', ['init', 'progressMoving', 'changeAudioStatus', 'setCurrent', 'setId']),
			//切换音乐
			shiftSong(e, type){
				if(!e.currentTarget.dataset.disabled){
					type==='next' ? this.setCurrent(parseInt(this.current)+1) : this.setCurrent(parseInt(this.current)-1)
					this.init()
				}
			},
			onTouch(e){
				this.clienXStart = e.changedTouches[0].clientX
			},
			onTouchEnd(e){
				const clientXEnd = e.changedTouches[0].clientX
				if(this.clienXStart - clientXEnd > 100){
					//左滑
					if(this.current<this.list.length-1){
						this.setCurrent(parseInt(this.current)+1)
						this.init()
					}else
						uni.showToast({
							icon: 'none',
							title: '没有更多了'
						})
				}else if(clientXEnd - this.clienXStart > 100){
					//右滑
					if(this.current>0){
						this.setCurrent(parseInt(this.current)-1)
						this.init()
					}else
						uni.showToast({
							icon: 'none',
							title: '前面没有更多了'
						})
				}
			},
			likeHandle(e, i, status){
				// 存储时间戳避免连续点击发起频繁请求
				if(this.list[i].lastTime === undefined || e.timeStamp - this.playList[i].lastTime > 500){
					this.list[i].liked = status
					this.list[i].lastTime = e.timeStamp
				}
			},
		}
	}
</script>

<style lang="scss">
.header-title-custom{
	font-size: $font-size-md;
	width: 100%;
	text-align: center;
	letter-spacing: 1upx;
}
.header-title-tips{
	font-size: 22upx;
	font-weight: 200;
	opacity: .5;
	letter-spacing: 1upx;
}
.header-title-more{
	width: 88upx;
	display: flex;
	justify-content: center;
}
.play-page{
	.play{
		padding: 60upx;
	}
	.play-wrap{
		position: relative;
		width: 570upx;
		height: 888upx;
		margin: 0 auto;
		left: 0upx;
		transition: all .3s;
		&[data-start="true"]{
			left: -30upx;
		}
		&[data-end="true"]{
			left: 30upx;
		}
		.item-wrap{
			position: relative;
			z-index: 99;
			border-radius: 10upx;
			box-shadow: 0 6upx 16upx 0 rgba(0, 0, 0, 0.3);
			transition: all .3s, z-index 0s;
			&::before{
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				border-radius: 10upx;
				background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
				z-index: 1;
			}
			image{
				width: 100%;
				border-radius: 10upx;
				transition: all .3s;
			}
		}
		[data-index="0"]{
			right: 0upx;
		}
		[data-index="1"],[data-index="2"],[data-index="-1"],[data-index="-2"],[data-hide="true"]{
			position: absolute;
			width: 100%;
			right: -90upx;
			top: 0;
			transform: scale(.85);
			z-index: 9;
			image{
				opacity: 0.8;
			}
			&::before{
				background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
			}
		}
		[data-index="2"],[data-index="-2"],[data-hide="true"]{
			transform: scale(.7);
			z-index: 8;
			right: -180upx;
			opacity: 0.6;
		}
		[data-index="-1"]{
			right: 90upx;
		}
		[data-index="-2"]{
			right: 180upx;
		}
		[data-hide="true"]{
			opacity: 0;
		}
		.information{
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1em;
			width: 100%;
			box-sizing: border-box;
			z-index: 9;
		}
		.like-wrap{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.5em;
			height: 2.5em;
			background: rgba(255,255,255,0.2);
			border-radius: 50%;
			text{
				transition: all .3s;
				&:active{
					transform: scale(1.1);
				}
			}
		}
	}
	.controller{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 60upx;
		.iconfont{
			margin: 0 30upx;
			width: 3em;
			height: 3em;
			border: solid 1px rgba(255,255,255,0.1);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			&[data-disabled]{
				color: rgba(255,255,255,0.4);
			}
		}
		.play-pause{
			font-size: 1.4em;
		}
		.progress-wraper{
			position: fixed;
			z-index: 90;
			left: 0;
			width: 100%;
			bottom: 0;
			background: rgba(0,0,0,0.2);
			height: 20upx;
		}
		.progress{
			background: #46ce5c;
			width: 0%;
			height: 100%;
			box-sizing: border-box;
			border-right: solid 10upx #fff;
		}
	}
}
</style>
